<template>
  <div class="tags" v-if="$route.meta.isNav">
    <el-tag
      v-for="tag in tags"
      :key="tag.name"
      class="tags-item"
      closable
      @close="closeTags(tag)"
      @click="clickTags(tag)"
      :hit="tag.path === $route.path"
      size="small"
    >
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script>
import { computed } from "vue";
import router from "@/router/beforeEach";
import { useStore } from "vuex";
export default {
  name: "Tags",
  setup() {
    const store = useStore();
    return {
      tags: computed(() => store.state.sys.tags),
      clickTags: (tag) => {
        router.push(tag.path);
      },
      closeTags: (tag) => {
        store.commit("sys/deleteTags", tag);
      },
    };
  },
};
</script>

<style>
.tags-item {
  margin: 8px 10px;
  user-select: all;
}
</style>